<template>
  <div>
    <header>
      <div class="title">
        <h2>购物车</h2>
        <p>
          <span class="iconfont">&#xf0112;</span>
          <span class="iconfont">&#xe71e;</span>
          <i></i>
        </p>
      </div>
      <nav>
        <a href="#" class="cur">全部(20)</a>
        <a href="#">降价(4)</a>
        <a href="#">常卖(2)</a>
        <a href="#">分类^</a>
      </nav>
    </header>
    <div id="head-bottom">
      <span></span>
      <span>小U自营</span>
      <span>已免运费</span>
      <b>|</b>
      <span>领劵</span>
    </div>
    <!-- 主体内容部分 -->
    <main>
      <div class="con">
        <article>
          <sup class="iconfont cur">&#xe71e;</sup>
          <img src="images/shop.jpg" alt="" />
          <div class="text">
            <p>溪牧原山茶花洁面泡沫 氨基酸洗面奶</p>
            <p>敏感肌可用，控油祛痘、男女可用温和不紧绷</p>
            <p>
              <select name="" id="">
                <option value="">粉色 50ML</option>
              </select>
            </p>
            <p>比加入时降低￥100元</p>
            <p>
              <b>￥</b><i>999</i><del>￥1099</del><strong>-</strong><em>1</em
              ><strong>+</strong>
            </p>
          </div>
        </article>
        <article>
          <sup class="iconfont cur">&#xe71e;</sup>
          <img src="images/shop.jpg" alt="" />
          <div class="text">
            <p>溪牧原山茶花洁面泡沫 氨基酸洗面奶</p>
            <p>敏感肌可用，控油祛痘、男女可用温和不紧绷</p>
            <p>
              <select name="" id="">
                <option value="">粉色 50ML</option>
              </select>
            </p>
            <p>比加入时降低￥100元</p>
            <p>
              <b>￥</b><i>999</i><del>￥1099</del><strong>-</strong><em>1</em
              ><strong>+</strong>
            </p>
          </div>
        </article>
        <article>
          <span></span>
          <img src="images/shop.jpg" alt="" />
          <div class="text">
            <p>溪牧原山茶花洁面泡沫 氨基酸洗面奶</p>
            <p>敏感肌可用，控油祛痘、男女可用温和不紧绷</p>
            <p>
              <select name="" id="">
                <option value="">粉色 50ML</option>
              </select>
            </p>
            <p>比加入时降低￥100元</p>
            <p>
              <b>￥</b><i>999</i><del>￥1099</del><strong>-</strong><em>1</em
              ><strong>+</strong>
            </p>
          </div>
        </article>
      </div>
      <!--精选好货  -->
      <div id="head-bottom">
        <span></span>
        <span>品牌精选</span>
        <span>已免运费</span>
        <b>|</b>
        <span>领劵</span>
      </div>
      <!-- 内容 -->
      <div class="con">
        <article>
          <span></span>
          <img src="images/shop.jpg" alt="" />
          <div class="text">
            <p>溪牧原山茶花洁面泡沫 氨基酸洗面奶</p>
            <p>敏感肌可用，控油祛痘、男女可用温和不紧绷</p>
            <p>
              <select name="" id="">
                <option value="">粉色 50ML</option>
              </select>
            </p>
            <p>比加入时降低￥100元</p>
            <p>
              <b>￥</b><i>999</i><del>￥1099</del><strong>-</strong><em>1</em
              ><strong>+</strong>
            </p>
          </div>
        </article>
        <article>
          <span></span>
          <img src="images/shop.jpg" alt="" />
          <div class="text">
            <p>溪牧原山茶花洁面泡沫 氨基酸洗面奶</p>
            <p>敏感肌可用，控油祛痘、男女可用温和不紧绷</p>
            <p>
              <select name="" id="">
                <option value="">粉色 50ML</option>
              </select>
            </p>
            <p>比加入时降低￥100元</p>
            <p>
              <b>￥</b><i>999</i><del>￥1099</del><strong>-</strong><em>1</em
              ><strong>+</strong>
            </p>
          </div>
        </article>
        <article>
          <span></span>
          <img src="images/shop.jpg" alt="" />
          <div class="text">
            <p>溪牧原山茶花洁面泡沫 氨基酸洗面奶</p>
            <p>敏感肌可用，控油祛痘、男女可用温和不紧绷</p>
            <p>
              <select name="" id="">
                <option value="">粉色 50ML</option>
              </select>
            </p>
            <p>比加入时降低￥100元</p>
            <p>
              <b>￥</b><i>999</i><del>￥1099</del><strong>-</strong><em>1</em
              ><strong>+</strong>
            </p>
          </div>
        </article>
      </div>
    </main>
    <!-- 页脚 -->
    <footer>
      <div class="top">
        <span></span>
        <b>全选</b>
        <p><em>合计</em><i>已免运费</i></p>
        <p><em class="cur">￥1998</em><i>已优惠￥200元</i></p>
        <input type="text" value="结算" />
      </div>
      <div class="bottom">
        <p>
          <i class="iconfont">&#xeb70;</i>
          <span>商城</span>
        </p>
        <p>
          <i class="iconfont">&#xeb70;</i>
          <span>分类</span>
        </p>
        <p class="cur">
          <i class="iconfont">&#xeb70;</i>
          <span>购物车</span>
        </p>
        <p>
          <i class="iconfont">&#xeb70;</i>
          <span>我</span>
        </p>
      </div>
    </footer>
  </div>
</template>

<script>
export default {};
</script>

<style>
@import "../../public/css/shopping.css";
</style>